import React, { Component } from 'react'
import { SearchBar } from 'antd-mobile'
import "./index.scss";
import axios from 'axios';
//使用防抖节流
import debounce from 'lodash/debounce';
export default class SearchCom extends Component {
    constructor() {
        super();
        this.state = {
            searchTxt: "",
            searchList: [],
            reList: []
        }
        //将搜索的获取数据的函数做防抖节流处理
        this.getSearchData = debounce(this.getSearchData, 1000);
    }
    changeTxt = (value) => {
        console.log(value);
        this.setState({
            searchTxt: value
        })
        //获取数据
        this.getSearchData(value);
    }

    getSearchData = (value) => {
        axios.post(
            'https://srv.hotkidceo.com/appapi/root-ceo-commodity/esApi/suggestion', { "key": value, "isWholeSale": 0, "channelId": "C06022632001" }
        ).then(res => {
            console.log(res);
            let data = res.data.data.suggestionList;
            if (data.length > 0) {
                this.setState({
                    searchList: data
                })
            }
        })
    }
    goList = (value) => {
        this.props.history.push('/list/' + value);
    }
    componentDidMount() {
        axios.post(
            'https://srv.hotkidceo.com/appapi/root-ceo-commodity/commodityApi/searchWords', { isWholeSale: 0, channelId: null }
        ).then(res => {
            console.log(res);
            this.setState({ reList: res.data.data.keywords })
        })

    }

    render() {
        let { searchTxt, searchList, reList } = this.state;
        return (
            <div className="search_con">
                <div className='search_con_sousuo'> <SearchBar placeholder='请输入内容' showCancelButton={() => true} onCancel={() => {

                    this.goHome(this.props.history.push('/'))
                }} value={searchTxt} onChange={this.changeTxt} />
                </div>
                {
                    searchList.length !== 0 ? <ul>
                        {
                            searchList.map((item, index) => <li className='jilu' key={index} onClick={() => { this.goList(item) }}>
                                {item}
                            </li>)
                        }
                    </ul>
                        :
                        <div>
                            <div className='remen'>
                                <h3>热门搜索</h3>
                                <div className='remen_shuju'>
                                    {
                                        reList.map((item, index) => <span onClick={() => { this.goList(item.name) }} className={item.isHighlight === "1" ? "hong" : "hui"} key={index}>{item.name}</span>)
                                    }
                                </div>

                            </div>
                            {/* <div>
                                <h3>搜索历史</h3>
                                搜索历史需要保存在 localStorage中
                            </div> */}

                        </div>
                }
                <ul>
                </ul>


            </div>
        )
    }
}
<ul>

</ul>